<template>
  <div class="address-edit-page">
    <nav-bar>{{ title }}</nav-bar>
    <van-address-edit
        :area-list="areaList"
        :show-delete="state.type === 'edit'"
        :address-info="state.addressInfo"
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
    />
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, computed} from "vue";
import NavBar from "@/components/common/navbar/NavBar.vue";
import {useRouter} from "vue-router";
import {useRoute} from "vue-router";
import {tdist} from "@/utils/address.js";
import {areaList, state} from "@/views/profile/state";
import {addAddress, deleteAddress, editAddress, getAddressDetail} from "@/network/address";
import type {AddressEditInfo,showSuccessToast} from "vant";

const router = useRouter();
const route = useRoute();
// 接收参数
// const { type, addressId } = route.query;
state.type = route.query.type as string || "add";
if (state.type === "edit") {
  state.addressId = route.query.addressId as string;
} else {
  state.addressInfo = {
    tel: "",
    name: "",
    city: "",
    county: "",
    country: "",
    province: "",
    areaCode: "",
    isDefault: false,
    addressDetail: ""
  };
}
// 计算属性
const title = computed(() => {
  // 判断state里面的类型
  return state.type == "add" ? "新增地址" : "编辑地址";
});

function onSave(info: AddressEditInfo) {

  if (state.type === "edit") {
    editAddress(Number(state.addressId), {
      name: info.name,
      phone: info.tel,
      province: info.province,
      city: info.city,
      county: info.county,
      address: info.addressDetail,
      is_default: info.isDefault ? 1 : 0 // 判断是否为默认地址
    }).then((res) => {
      if (res.status === 204) {
        showSuccessToast("编辑地址成功");
        setTimeout(() => {
          router.back();
        }, 1000);
      }
    });
  } else {
    addAddress({
      name: info.name,
      phone: info.tel,
      province: info.province,
      city: info.city,
      county: info.county,
      address: info.addressDetail,
      is_default: info.isDefault ? 1 : 0 // 判断是否为默认地址
    }).then((res) => {
      if (res.status === 201) {
        showSuccessToast("添加地址成功");
        setTimeout(() => {
          router.back();
        }, 1000);
      }
    });
  }

}

function onDelete() {
  deleteAddress(Number(state.addressId)).then((res) => {
    if (res.status === 204) {
      showSuccessToast("删除地址成功");
    }
  });
}

onMounted(() => {
  let _province_list: any = {}; // 省列表
  let _city_list: any = {}; // 市列表
  let _county_list: any = {}; // 县列表
  //遍历所有 省数据
  tdist.getLev1().forEach((p: any) => {
    // 把 省 的id拿出来
    _province_list[p.id] = p.text;

    // 遍历所有 市数据
    tdist.getLev2(p.id).forEach((c: any) => {
      _city_list[c.id] = c.text;
      tdist.getLev3(c.id).forEach((q: any) => {
        _county_list[q.id] = q.text;
      });
    });
  });
  areaList.province_list = _province_list;
  areaList.city_list = _city_list;
  areaList.county_list = _county_list;
  if (state.type === "edit") {
    detail();
  }
});

function detail() {
  getAddressDetail(Number(state.addressId)).then((res) => {
    state.addressInfo.tel = res.phone;
    state.addressInfo.name = res.name;
    state.addressInfo.city = res.city;
    state.addressInfo.county = res.county;
    state.addressInfo.province = res.province;
    state.addressInfo.isDefault = (res.is_default === 1);
    state.addressInfo.addressDetail = res.address;
  });
}

</script>

<style lang="scss" scoped>
.address-edit-page {
  margin: 48px 0 0 0;
}
</style>